<template>
    <div class="provider-select">
        <SelectRoot v-model="fruit">
            <SelectTrigger
                class="inline-flex min-w-[160px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
                aria-label="Customise options">
                <SelectValue placeholder="请选择模型..." />
                <Icon icon="radix-icons:chevron-down" class="h-3.5 w-3.5" />
            </SelectTrigger>

            <SelectPortal>
                <SelectContent
                    class="min-w-[160px] bg-white rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-[100]"
                    :side-offset="5">
                    <SelectViewport class="p-[5px]">
                        <div v-for="provider in items">
                            <!-- 小图标 -->
                            <img :src="provider.avatar" :alt="provider.name" />
                            <!-- 选项标签 -->
                            <SelectLabel>{{ provider.name }}</SelectLabel>
                            <SelectGroup>
                                <SelectItem v-for="(model, index) in provider.models" :key="index" :value="model">
                                    <SelectItemText>{{ model }}</SelectItemText>
                                </SelectItem>
                            </SelectGroup>
                        </div>
                    </SelectViewport>
                </SelectContent>
            </SelectPortal>
        </SelectRoot>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectItemIndicator,
    SelectLabel,
    SelectPortal,
    SelectRoot,
    SelectScrollDownButton,
    SelectScrollUpButton,
    SelectSeparator,
    SelectTrigger,
    SelectValue,
    SelectViewport,
    SelectItemText
} from 'radix-vue';

import { ProviderProps } from '../types'

defineProps<{ items: ProviderProps[] }>()
</script>
<style></style>